<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <style type="text/css">
      button {
        font: inherit;
      }

      .button {
        padding: 1em;
        border: 0;
        font-family: Helvetica, Arial, sans-serif;
        color: white;
        border-radius: 0.5em;
        background-image: linear-gradient(
          to bottom,
          oklch(57% 0.11 263deg),
          oklch(40% 0.13 263deg)
        );
        box-shadow: 0.1em 0.1em 0.5em oklch(26% 0.07 263deg);
      }

      .button:active {
        box-shadow:
          inset 0 0 0.5em oklch(26% 0.07 263deg),
          inset 0 0.5em 1em rgb(0 0 0 / 0.4);
      }
    </style>
  </head>
  <body>
    <button class="button">Sign up now</button>
  </body>
</html>
